<template>
	<!-- #ifndef APP-NVUE -->
	<view class="uy-list" :style="itemStyle">
		<view v-if="border" class="uy-list-border-top" :style="borderStyle"></view>
		<slot />
		<view v-if="border" class="uy-list-border-bottom" :style="borderStyle"></view>
	</view>
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" :class="{ 'uy-list-border': border, 'uy-list': flex }" :style="itemStyle" :enableBackToTop="enableBackToTop"
		loadmoreoffset="15">
		<slot />
	</list>
	<!-- #endif -->
</template>

<script>
	/**
	 * List 列表
	 * @description 列表组件
	 * @property {String}  bgColor  自定义背景色  默认 transparent
	 * @property {Boolean} 	border = [true|false] 实现显示边框  默认false
	 * @property {String} 	borderColor  自定义边框颜色  默认#e5e5e5
	 */
	export default {
		name:"uy-list",
		'mp-weixin': {
			options: {
				multipleSlots: false
			}
		},
		props: {
			flex: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			stackFromEnd:{
				type: Boolean,
				default:false
			},
			enableBackToTop: {
				type: [Boolean, String],
				default: false
			},
			scrollY: {
				type: [Boolean, String],
				default: false
			},
			border: {
				type: Boolean,
				default: false
			},
			borderColor: {
				type: String,
				default: '#e5e5e5'
			},
			renderReverse:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			itemStyle() {
				let str = `background-color: ${this.bgColor};`
				if(this.border) {
					str += `border-top-color: ${this.borderColor}; border-bottom-color: ${this.borderColor};`
				}
				return str
			},
			borderStyle() {
				return `background-color: ${this.borderColor};`
			}
		},
		methods: {
			loadMore(e) {
				this.$emit('scrolltolower');
			},
			scroll(e) {
				this.$emit('scroll', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uy-list {
		display: flex !important;
		/* #ifdef APP-NVUE */
		flex-direction: row !important;
		/* #endif */
		position: relative;
		flex-wrap: wrap;
	}
	
	.uy-list-border {
		position: relative;
		/* #ifdef APP-NVUE */
		border-top-style: solid;
		border-top-width: 0.5px;
		border-top-color: transparent;
		border-bottom-style: solid;
		border-bottom-width: 0.5px;
		border-bottom-color: transparent;
		/* #endif */
		z-index: -1;
	}
	
	/* #ifndef APP-NVUE */
	.uy-list-border-top {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		z-index: 1;
	}
	
	.uy-list-border-bottom {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 1px;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	/* #endif */
</style>